<template>
	<view class="container" :style="(ispdFocus || isuserFocus)?containerHeight.focus:containerHeight.blur">
		<u-toast ref="uToast"></u-toast>
		<view class="input-area">
			<view class="user-icon">
				<image :src="userImg" :style="isDisabledBtn?'opacity:0.5':'opacity:1'" style="border-radius: 50%;"></image>
			</view>
			<!-- 用户名输入框 -->
			<!-- <view class="input-text" :style="isnmFocus?input_boder_style.focus:input_boder_style.blur">
				<view :style="isnmFocus?label_style.focus:label_style.blur">
					昵 称
				</view>

				<u-input :focus="un" v-model="userLoginInfo.nickName" type="text" :height="100"
					:custom-style="customStyle" :clearable="false" @focus="nmFocus" @blur="nmBlur" placeholder="请输入昵称" />

				<view class="clear" @click="clearInput('nickName')" v-show="userLoginInfo.nickName!=='' && isuserFocus">
					<image :src="clearImg" class="img"></image>
				</view>
			</view> -->

			<view class="input-text" :style="isuserFocus?input_boder_style.focus:input_boder_style.blur">
				<view :style="isuserFocus?label_style.focus:label_style.blur">
					帐 号
				</view>

				<u-input disabled :focus="un" v-model="userLoginInfo.username" type="text" :height="100"
					:custom-style="customStyle" :clearable="false" @focus="userFocus" @blur="userBlur"
					placeholder="请输入账号" />

				<view class="clear" @click="clearInput('userName')" v-show="userLoginInfo.userName!=='' && isuserFocus">
					<image :src="clearImg" class="img"></image>
				</view>
			</view>
			<!-- 密码输入框 -->
			<view class="input-text" :style="ispdFocus?input_boder_style.focus:input_boder_style.blur">
				<view :style="ispdFocus?label_style.focus:label_style.blur">
					密 码
				</view>

				<u-input disabled  :focus="pd" v-model="userLoginInfo.password" type="password" :password-icon="false"
					:height="100" placeholder="" :maxlength="pdMaxLength" :custom-style="customStyle" :clearable="false"
					@focus="pdFocus" @blur="pdBlur" placeholder="请输入密码" />

				<view class="clear" @click="clearInput('password')" v-show="userLoginInfo.password!=='' && ispdFocus">
					<image :src="clearImg" class="img"></image>
				</view>
			</view>
			<view>
				<span class="register">已注册? <a href="" @click="toLogin()"
						style="color: #007aff; text-decoration: none;">立即登陆</a>
				</span>
			</view>

			<!-- 登录按钮 -->
			<view class="btn">
				<u-button size="default" :loading="isLogining" :ripple="true"
					:custom-style="isDisabledBtn?login_btn_style.disabled:login_btn_style.able"
					:disabled="isDisabledBtn" @click="register()">{{isLogining?'':'注 册'}}</u-button>
			</view>


		</view>
		<view class="copy-right">CopyRight 中国文化视窗网</view>
	</view>
</template>

<script>
	import api from '@/util/api.js';
	import vote from '../../util/vote';

	export default {
		data() {
			return {
				// ------------- 其他 -------------
				userLoginInfo: {
					// nickName: '',
					username: "",
					password: ""
				},

				// 整体容器高度，单位 rpx

				// containerHeight: 1000,
				containerHeight: {
					focus: 'height:800rpx;transition:0.2s',
					blur: 'height:1300rpx;transition:0.2s'
				},

				// 获取焦点时，整体上移的动画效果
				animationData: {},

				// 登录界面的用户图标
				// userImg: '../../static/images/avatar.png',
				userImg: '../../static/logo.png',

				// 是否正在清除
				isClearing: false,

				// ------------- 输入框 -------------
				pdMaxLength: 10,
				// 输入框是否获取到焦点
				isuserFocus: false,
				ispdFocus: false,
				isnmFocus: false,

				// 输入框自定义样式
				customStyle: {
					"padding-left": "40rpx",
					// 使光标消失（iOS无效果）
					"color": "transparent",
					"text-shadow": "0 0 0 #000"
				},

				// 清除按钮图标
				clearImg: 'https://img1.baidu.com/it/u=251769648,1463852244&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1705078800&t=ca0327b7e61f869a02c245623c2b8749',

				// 输入框 label 样式
				label_style: {
					focus: 'width:100rpx;display:flex;justify-content:center;color:#FF5242;font-weight:bold;transform:scale(1.1)',
					blur: 'width:100rpx;display:flex;justify-content:center;color:#aaaaaa;transform:scale(1)'
				},

				input_boder_style: {
					focus: 'border-bottom: 1px solid #FF5242;',
					blur: 'border-bottom: 1px solid #e4e4e4;'
				},

				// ------------- 登录按钮 -------------
				// 登录按钮自定义样式
				login_btn_style: {
					able: {
						"width": "100%",
						"height": "100rpx",
						"border-radius": "20rpx",
						"border": "#e4e4e4",
						"background-color": "#FF5242",
						"color": "#fff"
					},
					disabled: {
						"width": "100%",
						"height": "100rpx",
						"border-radius": "20rpx",
						"border": "#e4e4e4",
						"background-color": "#FF5242",
						"color": "#fff",
						"opacity": "0.5"
					}
				},

				// 点击登录按钮后，接口返回数据前，对该操作上锁

				isLogining: false,

				un: false,
				pd: false,

				isDisabledBtn: false
			}
		},
		methods: {
			userFocus() {
				// 是否在焦点上
				this.isuserFocus = true
			},
			userBlur() {
				setTimeout(() => {
					this.isuserFocus = false
				}, 1)
			},

			nmFocus() {
				// 是否在焦点上
				this.isnmFocus = true
			},
			nmBlur() {
				setTimeout(() => {
					this.isnmFocus = false
				}, 1)
			},



			pdFocus() {
				this.ispdFocus = true
			},
			pdBlur() {
				// 失去焦点事件先于清除事件触发，因此让其延迟即可先触发 clearInput 事件
				setTimeout(() => {
					this.ispdFocus = false
				}, 1)
			},

			// 清除 input 内容
			clearInput(value) {
				switch (value) {
					case 'userName':
						// setTimeout(() => {
						this.userLoginInfo.username = ''
						// 清空内容之后保持焦点
						this.un = false
						this.$nextTick(() => {
							this.un = true
						})
						// }, 2)
						break
					case 'nickName':
						// setTimeout(() => {
						this.userLoginInfo.nickName = ''
						// 清空内容之后保持焦点
						this.un = false
						this.$nextTick(() => {
							this.un = true
						})
						// }, 2)
						break
					case 'password':
						// setTimeout(() => {
						this.userLoginInfo.password = ''
						this.pd = false
						this.$nextTick(() => {
							this.pd = true
						})
						// }, 2)
						break
				}
			},

			register() {
				// 加载的动画
				this.isLogining = true
				vote.message("请使用一键登录",'error')
				this.isLogining = false
				setTimeout(()=>{
					return this.toLogin()
				},500)
					return;
				this.api.post("/register", this.userLoginInfo).then(res => {
					// 清除状态
					this.isLogining = false;

					console.log(res);
					const msg = (res.code == 200 ? '注册成功' : res.msg)
					// 验证是否注册成功
					if (res.code != 200) return vote.message(res.msg, 'error')

					vote.message("注册成功！", 'success');

					// 跳转
					this.toLogin();
				})

			},
			// 跳转登录
			toLogin() {
				this.$u.route('/pages/login/login');
			}

		},
		watch: {
			userLoginInfo: {
				handler(newVal, oldVal) {
					console.log(newVal, oldVal);
					if ((newVal.username !== '') && (newVal.password !== '')) {
						this.isDisabledBtn = false
					} else {
						this.isDisabledBtn = true
					}
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	$screen-height: 1334rpx;

	.register {
		display: block;
		margin-top: 20px;
		font-size: 14px;
		color: #555;
		text-align: right;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		width: 100%;


		.input-area {
			width: 80%;

			.user-icon {
				width: 100%;
				display: flex;
				justify-content: center;

				>image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.input-text {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				margin-top: 20rpx;

				.clear {
					height: 100rpx;
					display: flex;
					align-items: center;

					.img {
						height: 36rpx;
						width: 36rpx;
					}
				}
			}

			.btn {
				margin-top: 40rpx;

				.login-btn {
					width: 100%;
					border-radius: 20rpx;
					border: $uni-color-primary;
					background-color: $uni-color-primary;
					color: $uni-text-color-inverse;
				}
			}
		}

		.copy-right {
			// bottom: 100rpx;
			bottom: 0;
			width: 100%;
			color: $uni-text-color-grey;
			text-align: center;
			font-size: 24rpx;
		}
	}
</style>